<template>
  <!-- :style="'background-image:url('+ CenterBackground +');'" -->
  <div id="app" style="background-size:cover">
    <router-view />
  </div>
</template>

<script>
// import CenterBackground from '@/assets/images/centerBackground.png'

export default {
  name: 'App',
  data() {
    return {
      // CenterBackground: CenterBackground,
      uploadProgress: [],
    }
  },
  components: {
  },
  computed: {
    uploading() {
      return this.$store.state.upload.uploading;
    },
  },
  mounted() {
    let timer
    window.onresize = () => {
      if (timer) {
        clearTimeout(timer)
      }
      timer = setTimeout(() => {
        timer = null
        this.$bus.$emit('resize')
      }, 200)
    }
  },
  watch: {
    uploading: {
      immediate: true,
      handler: function (val) {
        this.uploadProgress = (val || []).map((v) => {
          const index = this.uploadProgress.findIndex((p) => p.uid === v.uid);
          if (index > -1) {
            return this.uploadProgress[index];
          } else {
            return v;
          }
        });
        if (val.length > 0) {
          if (this.interval) {
            clearInterval(this.interval);
          }
          this.interval = setInterval(() => {
            this.uploadProgress = this.uploadProgress.map((u) => {
              if (!u.progress) {
                return { ...u, progress: 1 };
              } else if (u.progress < 91) {
                return { ...u, progress: u.progress + 10 };
              } else if (u.progress < 99) {
                return { ...u, progress: u.progress + 2 };
              } else {
                return u;
              }
            });
          }, 2500);
        } else {
          if (this.interval) {
            clearInterval(this.interval);
          }
        }
      }
    }
  },
  destroyed() {
    if (this.interval) {
      clearInterval(this.interval);
    }
  },
}
</script>

<style>
#app {
  width: 100%;
  overflow: auto;
}

body {
  padding-right: 0 !important;
}
</style>
